<template>
  <el-dialog
    title="自定义字段"
    :visible.sync="visible"
    width="1000px"
    :close-on-click-modal="false"
    :before-close="closeEditField"
  >
    <field-table ref="fieldTable" class="fieldTable"></field-table>

    <div slot="footer" class="dialog-footer">
      <el-button @click="closeEditField">取 消</el-button>
      <el-button type="primary" @click="toSubmit">确定</el-button>
    </div>
  </el-dialog>
</template>
<script>
import FieldTable from "./fieldTable";
import api from "@/api/index";
export default {
  components: { FieldTable },
  props: {
    visible: {
      type: Boolean,
      default: false
    }
  },
  data() {
    return {
      id: this.$route.query.id
    };
  },
  methods: {
    closeEditField() {
      this.$emit("update:visible", false);
    },
    toSubmit() {
      let list = this.$refs["fieldTable"].multipleSelection;
      //console.log("list", list);
      api.addField(this.id, list).then(res => {
          this.msgSuccess("添加成功!");
          this.closeEditField();
          this.$emit("reloadList");
      });
    }
  }
};
</script>
<style lang="scss" scoped>
::v-deep.fieldTable {
  .pagination-container {
    padding: 32px 16px 0px;
  }
}
</style>
